<template>
  <el-dialog
    v-if="load"
    title="选择报关信息"
    v-model="visible"
    align-center
    width="1100"
    @close="handleClose"
    :z-index="2000"
  >
    <div class="flex flex-wrap gap-[8px] mb-4">
      <SelectCategory
        v-model="form.category"
        :showAllLevels="true"
        :clearable="false"
        filterable
        placeholder="产品分类"
        class="w-[340px]"
      ></SelectCategory>
      <SelectSupplieQuery
        class="w-[220px]"
        v-model="form.supplier_id"
        ref="SelectSupplieQueryRef"
        placeholder="供应商名称"
        clearable
      ></SelectSupplieQuery>
      <el-input
        v-model.trim="form.customs_code"
        class="w-[160px]"
        placeholder="海关编码"
        clearable
      ></el-input>
      <el-button class="ml-auto m-0" type="primary" @click="handleSearch()"
        >查询</el-button
      >
      <!-- <el-button class="!ml-0" @click="handleReset()">重置</el-button> -->
    </div>
    <vxe-table ref="tableRef" :data="tableData" height="500" :loading="loading">
      <vxe-column type="radio" width="60" title="选择"></vxe-column>
      <vxe-column field="sku" title="SKU" width="80">
        <template #default="{ row }">
          {{ row.goods_sku?.sku }}
        </template>
      </vxe-column>
      <vxe-column field="supplier_name" title="供应商名称">
        <template #default="{ row }">
          <dataAuthority
            auth="supplier_name"
            :value="row.goods_sku_supplier?.supplier_name"
            :default_value="row.goods_sku_supplier?.supplier_code"
          ></dataAuthority>
        </template>
      </vxe-column>
      <vxe-column field="customs_code" title="海关编码"> </vxe-column>
      <vxe-column field="cn_name" title="报关中文名"> </vxe-column>
      <vxe-column field="cn_material" title="中文报关材质"> </vxe-column>
      <vxe-column field="declare_unit" title="报关单位" width="80">
        <template #default="{ row }">
          {{ row.declare_unit }}
          <span v-if="row.customs_quantity">({{ row.customs_quantity }})</span>
        </template>
      </vxe-column>
      <vxe-column field="purpose" title="产品用途"> </vxe-column>
      <vxe-column field="tax_rebate_rate" title="退税率">
        <template #default="{ row }"> {{ row.tax_rebate_rate }}% </template>
      </vxe-column>
      <vxe-column field="declare_elements" title="申报要素">
        <template #default="{ row }">
          <VText :value="row.declare_elements" :line="2"></VText>
        </template>
      </vxe-column>
    </vxe-table>
    <div>
      <vxe-pager
        v-model:current-page="page.pageNum"
        v-model:page-size="page.pageSize"
        :total="page.total"
        :page-sizes="[10, 20, 100]"
        @page-change="pageChange"
        :layouts="[
          'PrevJump',
          'PrevPage',
          'Jump',
          'PageCount',
          'NextPage',
          'NextJump',
          'Sizes',
          'Total',
        ]"
      >
      </vxe-pager>
    </div>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script lang="jsx" setup>
import { getCustomSearch } from "./api.js";
import { reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import SelectCategory from "@/components/SelectCategory";
import SelectSupplieQuery from "@/components/Selects/SelectSupplieQuery/index.vue";

let loadings = reactive({});

const props = defineProps({
  supplier_name: {
    type: String,
    default: "",
  },
});

const { supplier_name } = toRefs(props);

const emit = defineEmits(["close", "select"]);
let select = ref({});
const SelectSupplieQueryRef = ref();

const data = reactive({
  visible: false,
  load: false,
  tableData: [],
  form: {},
  page: {
    pageNum: 1,
    pageSize: 20,
    total: 0,
  },
  loading: false,
});

const { visible, load, tableData, form, page, loading } = toRefs(data);

const getList = async () => {
  const formData = {
    ...page.value,
  };
  if (form.value.category.length) {
    form.value.spu_category = form.value.category[form.value.category.length - 1];
  }

  loading.value = true;
  try {
    const res = await getCustomSearch({ ...formData, ...form.value });
    tableData.value = res.data;
    page.value.total = res.total;
  } catch (e) {
    console.error(e);
  } finally {
    loading.value = false;
  }
};

const handleSearch = () => {
  getList();
};

const handleReset = () => {
  form.value = {};
  getList();
};

const pageChange = (val) => {
  page.value.pageNum = val.currentPage;
  page.value.pageSize = val.pageSize;
  getList();
};
// 打开弹窗
const open = async (selection) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  setTimeout(() => {
    if (SelectSupplieQueryRef.value) {
      SelectSupplieQueryRef.value.supplierMethod(selection.supplier_name);
    } else {
      console.error("SelectSupplieQueryRef is not defined");
    }
  }, 200);
  await init(selection);
};

const init = async (selection) => {
  loadings = reactive({});
  form.value = selection;
  select.value = {};
  loadings = reactive({});
  visible.value = true;
  getList();
};

//获取已选中的行
const tableRef = ref();
const getSelectRow = () => {
  const $table = tableRef.value;
  if ($table) {
    return $table.getRadioRecord();
  }
};

// 关闭弹窗
const close = () => {
  loading.value = false;
  visible.value = false;
};

const handleClose = () => {
  emit("close");
};
// 提交
const submit = () => {
  const selectRow = getSelectRow();
  console.log(selectRow);
  if (!selectRow.id) return ElMessage.error("请选择报关信息");
  ElMessageBox.confirm(
    "是否将所选SKU+供应商的报关信息填充到当前报关信息中？点击确认后，则将所选SKU+供应商的报关信息加载到当前供应商+SKU中",
    "提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(async () => {
      emit("select", selectRow);
      close();
    })
    .catch(() => {});
};

// onMounted(async () => {
//   if (SelectSupplieQueryRef.value) {
//     await SelectSupplieQueryRef.value.supplierMethod(supplier_name.value);
//   }
// });

defineExpose({ open });
</script>
<style lang="scss" scoped>
:deep(.vxe-cell--radio) {
  font-size: 20px !important;
}
</style>
